<!--接口管理页面-->
<template>
    <section>
        <Row :gutter="10">
            <card>
                <Row>
                    <el-col :span="24" class="toolbar" id="serachId">
						<el-form :model="conditionForm" ref="conditionFormRef">
							<el-form-item style="float:right">
                                <el-button type="primary" @click="onSearch">&nbsp;搜索</el-button>
							</el-form-item>
                            <el-form-item style="float:right;margin-right: 15px">
                                <el-input v-model="conditionForm.serviceSerialNo" placeholder="接口标识"></el-input>
                            </el-form-item>
                            <el-form-item style="float:right;margin-right: 15px">
                                <el-input v-model="conditionForm.serviceName" placeholder="接口名称"></el-input>
                            </el-form-item>
						</el-form>
					</el-col>
                </Row>
            </card>

            <card>
            <el-row class="margin-top-10">
                <!--<el-col :span="4"><div class="grid-content bg-purple-dark">-->
                    <!--<el-tree-->
                            <!--node-key="id"-->
                            <!--:load="loadNode"-->
                            <!--ref="tree"-->
                            <!--lazy-->
                            <!--show-checkbox-->
                            <!--:props="treeDefaultProps"-->
                            <!--@check-change="onSearch"-->
                    <!--&gt;-->
                    <!--</el-tree>-->
                <!--</div></el-col>-->
                <el-col :span="24">
                    <el-table :data="resultDate.data.list" stripe style="width: 100%">
                        <el-table-column prop="serviceSerialNo" label="接口标识" ></el-table-column>
                        <el-table-column prop="serviceName" label="接口名称" ></el-table-column>
                        <el-table-column prop="providerSerialNo" label="服务方标识" ></el-table-column>
                        <el-table-column prop="providerName" label="服务方名称" ></el-table-column>


                        <el-table-column label="操作"  fixed="right">
                            <template slot-scope="scope">
                                <el-row style="margin-bottom: 5px">
                                    <el-col :span="8"><el-button type="text" size="small" @click="showServiceMonitorInfo(scope.$index, scope.row)">详情</el-button></el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-col :span="24" class="toolbar">
                        <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
                                    :current-page="resultDate.data.pageNum"
                                    :page-size="resultDate.data.pageSize" :total="resultDate.data.total">
                        </el-pagination>
                    </el-col>
                </el-col>

                <Modal v-model="serviceMonitorInfoVisible" title="服务器监控详情" width='50%' >
                    <el-card>
                        <row>
                            <el-col :span="24">
                                <!--<el-table  stripe style="width: 100%">-->
                                    <!--<el-table-column prop="serviceSerialNo" label="接口唯一标识" min-width="100"></el-table-column>-->
                                    <!--<el-table-column prop="version" label="版本号" min-width="100"></el-table-column>-->
                                    <!--<el-table-column prop="createById" label="创建人标识" min-width="100"></el-table-column>-->
                                    <!--<el-table-column prop="createTime" label="创建时间" min-width="100" :formatter="formatCommDatas"></el-table-column>-->
                                <!--</el-table>-->
                                <div id="container" style="height: 400px;"></div>
                            </el-col>
                        </row>
                    </el-card>
                </Modal>
            </el-row>
            </card>
        </Row>
    </section>
</template>
<script>
    import canEditTable from './components/canEditTable.vue';


    import {
        serPro_searchServiceAndProviderByCondition,
        pro_providerServiceMonitorSearch,
    } from '../api/api.js';
    import utils from '../api/utils.js';
    import Card from "iview/src/components/card/card";

    export default {
        components: {
            Card,
            canEditTable
        },
        data() {
            return {
                userData:[],
                resultDate: {data:{total:0, pageNum: 0,list:[]}},
                formLabelWidth: '155px',// 新增界面label大小


                // 查询条件
                conditionForm: {pageSize: 5 , policeType:"",serviceSerialNo:'',serviceName:'' },
                treeDefaultProps: {
                    label: 'name',
                    isLeaf: "isDirectory"
                },
                // 是否非第一次加载页面
                isNoFirstLoad:false,
                serviceMonitorInfoVisible:false,
                echartOption : {
                    legend: {
                        left: 'left',
                        data: ['CPU 使用率', '内存使用率']
                    },
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name:"CPU 使用率",
                        data: [],
                        type: 'line'
                    },{
                        name:"内存使用率",
                        data: [],
                        type: 'line'
                    }]
                },
            };
        },
        methods: {
            loadNode(node, resolve) {
                let _this = this
                if (node.level === 0) {// 第一次加载页面，树没数据就是==0
                    // dict_getRootListByType({"type":"jobCategory","isPageAble":false})
                    //     .then(res => {
                    //         resolve(res.data.data);
                    //     }).catch(function (error) {
                    //     _this.$message.warning('系统异常 ');
                    // });

                    resolve(utils.getDictDatasByType("jobCategory"))
                    return;
                }
                if(node.data.id>0){
                    // dict_getSubNodeListByPid({"pid":node.data.id,"isPageAble":false})
                    //     .then(res => {
                    //         resolve(res.data.data);
                    //     }).catch(function (error) {
                    //     _this.$message.warning('系统异常 ');
                    // });
                    resolve(utils.getDictDatasByPid(node.data.id))
                    return;
                }
            },
            handleCurrentPageChange: function (currentPage) {// 翻页动作
                this.currentPage = currentPage;
                this.onSearch();// 翻页后刷新页面数据
            },
            handleCurrentHistoryPageChange: function (currentPage) {// 翻页动作
                this.currentPage = currentPage;
                // {serviceSerialNo:row.serialNo,pageNum:1}
                this.searchHistorySerList({serviceSerialNo:this.currHistoryConditon.serviceSerialNo,pageNum:currentPage});// 翻页后刷新页面数据
            },
            handleClose(done) { // 新增界面关闭事件
                this.$confirm('确认关闭？', "提示").then(_ => {
                    done();
                }).catch(_ => {
                });
            },
            showServiceMonitorInfo(index,row){
                var _this = this;
                this.serviceMonitorInfoVisible=true;
                console.log(row.providerSerialNo);
                pro_providerServiceMonitorSearch({providerSerialNo:row.providerSerialNo})
                    .then(res => {
                        console.log(res)
                        var list = res.data.data.list;
                        if(list){
                            _this.echartOption.xAxis.data=[];
                            _this.echartOption.series[0].data=[];
                            _this.echartOption.series[1].data=[];
                            list.map(function (x) {
                                _this.echartOption.xAxis.data.push(x._time_id);
                                _this.echartOption.series[0].data.push(x._cpu_used);
                                _this.echartOption.series[1].data.push(x._mem_used);
                            });
                        }
                        this.$echarts.init(document.getElementById("container")).setOption(this.echartOption,false);
                    }).catch();
            },
            // 查询
            onSearch(){
                var _this = this;
                // if(this.isNoFirstLoad){// todo 这里把树里边的查询条件取出来 赋值到 policeType 传到后台
                //     _this.conditionForm.policeType=this.$refs.tree.getCheckedKeys();
                // }
                // this.isNoFirstLoad=true;
                _this.conditionForm.pageNum = _this.currentPage;
                serPro_searchServiceAndProviderByCondition(_this.conditionForm)
                    .then(res => {
                        console.log(res)
                        _this.resultDate = res.data;
                    }).catch(function (error) {
                    console.log(error);
                    this.$message.warning('系统异常 ');
                });
            },
            resetChecked() { // 清空所有选择的节点
                this.$refs.tree.setCheckedKeys([]);
            },

            formatDicTionary(value,type){
                return utils.formatDicTionary(value,type);
            },
            formatCommDatas(row, column){
                return utils.formatCommDatas(row, column);
            },

        },
        computed: {
        },
        created() {

        },
        watch:{
        },
        mounted(){
            this.onSearch();




        },



    };


</script>
 
 
